import { Box } from '@mui/material';
import React, { useEffect, useState } from 'react';

import { Paging } from '../tables/paging';
import { Search } from '../tables/search';
import { SORT_DIRECTION, SortDirection } from '../tables/sort-direction';
import { Option, SortField } from '../tables/sort-field';

const sortFields: Option[] = [
    {
        value: '',
        label: '___'
    },
    {
        value: 'name',
        label: 'Name'
    },
    {
        value: 'email',
        label: 'Email'
    },
    {
        value: 'timestamp',
        label: 'Time'
    }
];

enum FIELDS {
    SEARCH,
    PAGING,
    SORT_FIELD,
    SORT_DIRECTION
}

export interface IFilter {
    search: string;
    paging: number;
    sortField: string;
    sortDirection: SORT_DIRECTION;
}

export const DEFAULT_FILTER_VALUE = {
    search: '',
    paging: 10,
    sortField: 'timestamp',
    sortDirection: SORT_DIRECTION.DESC,
};

interface Props {
    onApplyFilter: Function;
}

export const SearchSortPagingHeader = ({ onApplyFilter }: Props) => {
    const [filter, setFilter] = useState<IFilter | undefined>();

    useEffect(() => {
        if (filter) {
            onApplyFilter(filter);
        }
    }, [filter]);

    const onApply = (value, key: FIELDS) => {
        switch (key) {
            case FIELDS.SEARCH: {
                setFilter({ ...(filter ?? DEFAULT_FILTER_VALUE), search: value });
                break;
            }
            case FIELDS.PAGING: {
                setFilter({ ...(filter ?? DEFAULT_FILTER_VALUE), paging: value });
                break;
            }
            case FIELDS.SORT_FIELD: {
                setFilter({ ...(filter ?? DEFAULT_FILTER_VALUE), sortField: value });
                break;
            }
            case FIELDS.SORT_DIRECTION: {
                setFilter({ ...(filter ?? DEFAULT_FILTER_VALUE), sortDirection: value });
                break;
            }
        }
    };

    return (
        <Box display={'flex'} justifyContent={'space-between'}  alignItems={'center'} gap={'10px'}>
            <Search
                placeholder={'Search by name or wallet address'}
                onClickApply={(value) => onApply(value, FIELDS.SEARCH)}
            />
            <Box
                sx={{
                    display:'inline-flex',
                    gap:'16px',
                }}
            >
                <Paging
                    value={DEFAULT_FILTER_VALUE.paging}
                    onClickApply={(value) => onApply(value, FIELDS.PAGING)}
                />
                <SortField
                    initValue={DEFAULT_FILTER_VALUE.sortField}
                    sortFields={sortFields}
                    onClickApply={(value) => onApply(value, FIELDS.SORT_FIELD)}
                />
                <SortDirection
                    onClickApply={(value) => onApply(value, FIELDS.SORT_DIRECTION)}
                    initValue={DEFAULT_FILTER_VALUE.sortDirection}
                />
            </Box>
        </Box>
    );
};
